<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Sinwa图片直播 - 详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<meta content="email=no" name="format-detection" />
	<link rel="stylesheet" type="text/css" href="./assert/css/reset.css" />
	<link rel="stylesheet" type="text/css" href="./assert/css/main.css" />
	<link rel="stylesheet" href="./assert/iconfont/iconfont.css">
	<link rel="shortcut icon" href="./favicon.ico">
	<script src="./assert/js/jquery-3.3.1.min.js"></script>
	<style>
		/*详情界面保持上部分静止，下面滚动; 同样利用flex布局 poster自然高度， tab-nav自然高度， tab-block填满剩余部分*/
		.poster {
			position: relative;
		}
		.post-img {
			height: 30vh;
			width: 100%;
		}
		.poster-title {
			position: absolute;
			bottom: 0;
			display: flex;
			align-items: center;
			color: #fff;
			width: 100%;
			height: 80px;
			/*这里不要使用opacity属性，文字也会继承透明属性，使用rgpa*/
			background: rgba(0, 0, 0, 0.3);
		}
		.poster-title-team {
			flex: 1;
			text-align: center;
		}
		.poster-title-team img {
			border-radius: 50%;
		}
		/* ************************tab 切换******************************* */
		.tab-nav {
			display: flex;
			margin-top: 5px;
			padding: 5px 0;
			text-align: center;
		}
		.tab-nav > div {
			flex: 1;
			line-height: 2rem;
			font-size: 1.1rem;
			text-align: center;
			border-right: 1px solid #eee;
			padding-bottom: 2px;
		}
		.tab-nav > div:last-child {
			border: none;
		}
		.tab-nav > div.active {
			border-bottom: 2px solid #38f;
		}
		.tab-block {
			flex: 1;
			overflow-y: scroll;
		}

		/******************赛况 frame时间片段的意思*****************/
		.frame {
			padding: 5px;
		}
		/*加强时间icon的效果*/
		.frame .icon {
			font-weight: bold;
			margin-right: 5px;
		}
		.frame-header {
			font-size: 0.8rem;
			display: inline-block;
			padding: 2px 5px;
			background: red;
			color: #fff;
			border-radius: 10px;
		}
		.frame-item {
			position: relative;
			margin-left: 5px;
			border-left: 1px dotted #38f;
			padding: 20px 10px 0;
		}
		.frame-item > p {
			font-size: 1rem;
			color: #404040;
			padding: 5px 0;
		}
		.frame-dot {
			position: absolute;
			width: 6px;
			height: 6px;
			background: #38f;
			border-radius: 50%;
			left: -4px;
    		top: 27px;
		}
		.frame-item-author {
			color: #888;
			font-size: 0.8rem;
			vertical-align: middle;
		}
		/* *************** 评论 ****************  */
		.comments {
			/*为评论输入框留位置，由于输入框是绝对定位*/
			padding-bottom: 50px;
		}
		.comment-form {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50px;
		}
		.comment-form input {
			background:ghostwhite;
			border-top: 1px solid #eee;
			outline: none;
			padding: 5px 10px;
			width: 100%;
			height: 100%;
		}
		.comment {
			font-size: 1rem;
			line-height: 1.5rem;
			margin: 5px 10px;
		}
		.comment > span:first-child {
			color: #38f;
		}


		/*比赛数据*/
		.match-data {
			background: #eee;
		}
		.match-data > div {
			background: #fff;
			margin-bottom: 10px;
			padding: 10px;
		}
		.match-score {
			display: flex;
			flex-direction: row;
			align-items: center;
			text-align: center;
		}
		.match-team-info {
			flex: 1;
		}
		.match-team-info img {
			margin-bottom: 5px;
		}
		.match-score-result {
			flex: 3;
		}
		.match-score-result > div {
			margin: 5px 0;
		}
		.sub-title {
			font-size: 1.1rem;
			font-weight: bold;
		}
		.match-report-row {
			display: flex;
			height: 40px;
			line-height: 40px;
			text-align: center;
			align-items: center;
		}
		.match-report-row.row-title {
			border-bottom: 1px solid #eee;
			color: #888;
			font-size: .8rem;
		}
		.match-report-row span {
			flex: 1;
		}
		.match-report-row span:first-child {
			text-align: left;
		}
		.match-report-row span:last-child {
			text-align: right;
		}

		/* 本场最佳 */
		.mvp > div {
			margin: 10px 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.mvp-score {
			display: flex;
			font-size: 1.1rem;
			text-align: center;
			justify-content: space-between;
			align-items: center
		}
		.mvp-score span {
			margin: 0 10px;
		}
		.mvp-score-label {
			font-size: .8rem;
			color: #888;
		}
		.mvp-player {
			flex: 1;
			display: flex;
			align-items: center;
		}
		/*让第二个球员的信息，靠右*/
		.mvp-player:last-child {
			justify-content: flex-end;
		}
		.mvp-player-info {
			margin: 0 5px;
			font-size: .8rem;
			color: #888;
		}
		.mvp-player img {
			border-radius: 50%;
		}
	</style>
</head>

<body>
	<header class="header xxl-font">
		<i class="icon iconfont icon-fanhui back" id="back"></i>
		马刺vs火箭赛况
		<!--用户处于登录状态时，将该按钮隐藏-->
		<a href="./login.html">
			<i class="icon iconfont icon-wode my"></i>
		</a>
	</header>
	<div class="content">
		<div class="poster">
			<img src="./imgs/match-poster.png" class="post-img" />
			<div class="poster-title">
				<div class="poster-title-team">
					<img src="./imgs/team1.png" width="40px" height="40px">
					<div>马刺(50)</div>
				</div>
				<div>VS</div>
				<div class="poster-title-team">
					<img src="./imgs/team2.png" width="40px" height="40px">
					<div>火箭(52)</div>
				</div>
			</div>
		</div>
		<div class="tab-nav">
			<div class="active">赛况</div>
			<div>聊天室</div>
			<div>数据</div>
		</div>
		<div class="tab-block">
			<div id="match-result">
				<div class="frame">
					<h3 class="frame-header">
						<i class="icon iconfont icon-shijian"></i>第一节 01：30
					</h3>
					<div class="frame-item">
						<span class="frame-dot"></span>
						<div class="frame-item-author">
							<img src="./imgs/team1.png" width="20px" height="20px" /> 马刺
						</div>
						<p>08:44 暂停 常规暂停</p>
						<p>08:44 帕克 犯规 个人犯规 2次</p>
					</div>
					<div class="frame-item">
						<span class="frame-dot"></span>
						<div class="frame-item-author">
							singwa(评论员)
						</div>
						<p>01:44 </p>
						<p>01:46 犯规 个人犯规 Ruan</p>
					</div>
				</div>
				<div class="frame">
					<h3 class="frame-header">
						<i class="icon iconfont icon-shijian"></i>第二节 01：40
					</h3>
					<div class="frame-item">
						<span class="frame-dot"></span>
						<div class="frame-item-author">
							<img src="./imgs/team2.png" width="20px" height="20px" /> 火箭
						</div>
						<p>比赛如火如荼~~~</p>
						<p>
							<img src="./imgs/1.png" width="40%" />
						</p>
					</div>
					<div class="frame-item">
						<span class="frame-dot"></span>
						<div class="frame-item-author">
							singwa(评论员)
						</div>
						<p>08:44:41 火箭队请求暂停 常规暂停</p>
						<p>08:44:40 哈登进攻犯规 个人犯规3次</p>
					</div>
				</div>
			</div>
			<div id="comments" class="hidden comments">
				<div class="comment">
					<span>xixi</span>
					<span>赞~</span>
				</div>
				<div class="comment">
					<span>xixi</span>
					<span>赞~哈登mvp</span>
				</div>
				<div class="comment">
					<span>singwa</span>
					<span>哈登+克里斯-保罗 必定能夺冠，加油火箭！</span>
				</div>
				<div class="comment">
					<span>mooc</span>
					<span>詹姆斯去火箭吧~</span>
				</div>
				<div class="comment">
					<span>singwa2</span>
					<span>这场比赛太精彩了</span>
				</div>
				<div class="comment">
					<span>singwa</span>
					<span> 火箭目前位列西部第一，在击败独行侠之后，他们已经领先勇士1.5个胜场，而马刺的处境则是较为尴尬，他们目前拿到了37胜29负，只比身后的快船、掘金和爵士多0.5个胜场，如果马刺赢下火箭，他们将会继续保住西部前7的位置。</span>
				</div>
				<div class="comment">
					<span>xixi</span>
					<span>赞~</span>
				</div>
				<div class="comment">
					<span>xixi</span>
					<span>赞~dfdfgkkksds分担分担分担分担浮动</span>
				</div>
				<div class="comment">
					<span>singwa</span>
					<span>《烈火如歌》最近真是吸粉无数，各种话题随随便便就有成千上万的阅读量，本剧的点击量也轻轻松松破了十亿。看来热巴的高颜值和周渝民男神的实力演技，获得了大家的广泛肯...[详情]</span>
				</div>
				<div class="comment">
					<span>xixi</span>
					<span>赞~</span>
				</div>
				<div class="comment">
					<span>xixi</span>
					<span>赞~dfdfgkkksds分担分担分担分担浮动</span>
				</div>
				<div class="comment">
					<span>singwa</span>
					<span>《烈火如歌》最近真是吸粉无数，各种话题随随便便就有成千上万的阅读量，本剧的点击量也轻轻松松破了十亿。看来热巴的高颜值和周渝民男神的实力演技，获得了大家的广泛肯...[详情]</span>
				</div>
				<div class="comment-form">
					<input type="text" placeholder="别憋着，说点啥~~ 回车既发射"></input>
				</div>
			</div>
			<div id="match-data" class="hidden match-data">
				<div class="match-score">
					<div class="match-team-info">
						<img src="./imgs/team1.png" width="40px" height="40px" />
						<div>火箭</div>
					</div>
					<div class="match-score-result">
						<div style="font-size: .8rem;color: red;">第一小节 01：40</div>
						<div style="font-size: 1.2rem; color:red;">
							<span>21</span>
							<span>Live</span>
							<span>22</span>
						</div>
						<div style="font-size: .8rem; color:#888;">NBA常规赛</div>
					</div>
					<div class="match-team-info">
						<img src="./imgs/team2.png" width="40px" height="40px" />
						<div>雷霆</div>
					</div>
				</div>
				<div class="match-report">
					<h3 class="sub-title">赛况</h3>
					<div class="match-report-row row-title">
						<span>球队</span>
						<span>1TH</span>
						<span>2TH</span>
						<span>3TH</span>
						<span>4TH</span>
						<span>总分</span>
					</div>
					<div class="match-report-row">
						<span><img src="./imgs/team1.png" width="30px" height="30px" /></span>
						<span>20</span>
						<span>-</span>
						<span>-</span>
						<span>20</span>
						<span>40</span>
					</div>
					<div class="match-report-row">
						<span>
							<img src="./imgs/team2.png" width="30px" height="30px" />
						</span>
						<span>15</span>
						<span>-</span>
						<span>-</span>
						<span>30</span>
						<span>40</span>
					</div>
				</div>
				<div class="mvp">
					<h3 class="sub-title">本场最佳</h3>
					<div>
						<div class="mvp-player">
							<img src="./imgs/pa.png" width="50px;" height="40px" />
							<div class="mvp-player-info">
								<div>9</div>
								<div>帕克</div>
							</div>
						</div>
						<div class="mvp-score">
							<span>10</span>
							<span class="mvp-score-label">得分</span>
							<span>12</span>
						</div>
						<div class="mvp-player">
							<div class="mvp-player-info">
								<div>13</div>
								<div>哈登</div>
							</div>
							<img src="./imgs/ha.png" width="50px;" height="40px" />
						</div>
					</div>
					<div>
						<div class="mvp-player">
							<img src="./imgs/pa.png" width="50px;" height="40px" />
							<div class="mvp-player-info">
								<div>9</div>
								<div>帕克</div>
							</div>
						</div>
						<div class="mvp-score"><span>10</span><span class="mvp-score-label">助攻</span><span>9</span></div>
						<div class="mvp-player">
							<div class="mvp-player-info">
								<div>3</div>
								<div>保罗</div>
							</div>
							<img src="./imgs/bao.png" width="50px;" height="40px" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		$(function () {
			var $nav = $('.tab-nav div');
			var $content = $('.tab-block > div');
			var $back = $('#back');

			/*切换tab*/
			$nav.click(function () {
				var $this = $(this);
				var $t = $this.index();
				$nav.removeClass();
				$this.addClass('active');
				$content.css('display', 'none');
				$content.eq($t).css('display', 'block');
			});

			$back.click(function () {
				window.history.back();
			});
		});
	</script>
</body>
</html>